<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<jsp:include page="head.jsp"></jsp:include>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery仿淘宝购物车</title>
</head>
<body>
	<div class="blank"></div>
	<div class="block clearfix">
		<!--当前位置-->
		<div class="location ared">
			当前位置： <a href="before?id=0">首页</a> > 购物流程 > 购物车
		</div>
</body>
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>css/bootstrap.css">
<style lang="scss">
.shopping-car-container {
	padding: 50px 40px;
}

.shopping-car-container .car-headers-menu {
	border-bottom: 1px solid #f5f5f5;
	padding: 0 15px;
}

.shopping-car-container .panel-body {
	padding: 15px 0;
}

#checkAll {
	vertical-align: text-bottom;
}

.shopping-car-container .car-menu {
	text-align: center;
	width: 16%;
}
/*
		 商品区
		 * */
.shopping-car-container .goods-content {
	margin-top: 15px;
}

.shopping-car-container .goods-content .goods-item {
	margin-top: 20px;
}

.shopping-car-container .goods-content .goods-item .car-goods-info {
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	right: -30px;
}

.shopping-car-container .goods-content .goods-item .goods-image-column img,
	.shopping-car-container .goods-content .goods-item .goods-image-column span
	{
	display: block;
	float: left;
}

.shopping-car-container .goods-content .goods-item .goods-image-column span
	{
	width: calc(100% - 100px);
	box-sizing: border-box;
	text-indent: 2rem;
	line-height: 25px;
	padding: 10px;
}

.goods-price {
	color: red;
	font-weight: bolder;
}

.form-control {
	text-align: center;
}

.single-total {
	color: red;
	font-weight: bold;
}

.goods-params {
	color: darkgray;
}

.bottom-menu {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bottom-menu #checkAllBottom {
	vertical-align: text-bottom;
}

#deleteMulty {
	color: cornflowerblue;
	cursor: pointer;
	vertical-align: text-bottom;
}

.bottom-menu-include {
	background: #e5e5e5;
}

#selectGoodsCount {
	color: orangered;
	font-size: 16px;
	font-weight: bolder;
}

#selectGoodsMoney {
	color: orangered;
	font-size: 16px;
	font-weight: bolder;
}

.panel-default .submitData {
	background: orangered;
	font-size: 16px;
	color: white;
	cursor: pointer;
	font-weight: bolder;
	height: 58px;
	position: absolute;
	right: 0;
	top: 0;
}

.panel-default .submitDis {
	background: #B0B0B0;
	cursor: no-drop;
}

.shopping-car-container .panel-default {
	position: relative;
}
</style>
<body>
	
	<div class="shopping-car-container">
		<div class="car-headers-menu">
			<div class="row">
				<div class="col-md-1 car-menu">
					<label><input type="checkbox"  onclick="checkboxOnclickAll(this)" id="check-goods-all" 
					/>
					<span id="checkAll">全选</span></label>
				</div>
				<div class="col-md-3 car-menu">商品信息</div>
				<div class="col-md-1 car-menu">单价</div>
				<div class="col-md-1 car-menu">数量</div>
				<div class="col-md-1 car-menu">金额</div>
				<div class="col-md-2 car-menu">操作</div>
			</div>
		</div>
		<div class="goods-content">
			<c:forEach var="ce" items="${carList}">
				<div class="goods-item">
					<div class="panel panel-default">
						<div class="panel-body">
							<div class="col-md-1 car-goods-info">
								<label><input type="checkbox"  class="goods-list-item" <c:if test="${ce.flag==true }">checked="checked"</c:if>
								 onclick="checkboxOnclick('${ce.id}',this)" /></label>
							</div>
							<div class="col-md-3 car-goods-info goods-image-column">
								<img class="goods-image" src="images/image/${ce.gpicture}"
									style="width: 100px; height: 100px;" /> <span id="goods-info">"${ce.gname}"</span>
							</div>
							<div class="col-md-1 car-goods-info goods-price"
								style='right: -20px;'>
								<span>￥</span><span class="single-price">${ce.grprice} </span>
							</div>
							<div class="col-md-1 car-goods-info goods-counts"
								style='right: -75px; width: auto;'>
								<div class="input-group">
									<div class="input-group-btn">
										<button type="button" class="btn btn-default car-decrease"
											style='padding: 6px 6px;' onclick="putcart1('${ce.id}','${ce.shoppingnum}')"> -
										</button>
									</div>
									<input type="text" class="form-control goods-count"
										style='padding: 0px 1px; width: 80px ;background-color:transparent;'
										value="${ce.shoppingnum}" readonly="readonly">
									<div class="input-group-btn">
										<button type="button" class="btn btn-default car-add"
											style='padding: 6px 6px;' onclick="putcart2('${ce.id}','${ce.shoppingnum}','${ce.gstore }')" >	+
										</button>
									</div>
								</div>
							</div>
							<div class="col-md-1 car-goods-info goods-money-count"
								style='right: -140px;'>
								<span>￥</span><span class="single-total">${ce.smallsum}</span>
							</div>
							<div class="col-md-2 car-goods-info goods-operate"
								style='right: -175px;'>
								<button type="button" class="btn btn-danger item-delete">
									<a style='color: #FFFFFF;'
										href="javaScript:deleteAgoods('${ce.id}')">删除</a>
								</button>
							</div>
						</div>
					</div>
				</div>
			</c:forEach>

		</div>
		<div class="panel panel-default">
			<div class="panel-body bottom-menu-include">
				<div class="col-md-1 check-all-bottom bottom-menu">
					<label> <input type="checkbox" id="checked-all-bottom" 
					<c:if test="${ce.flag==true }">checked="checked"</c:if>/>
						<span id="checkAllBottom">全选</span>
					</label>
				</div>
				<div class="col-md-1 bottom-menu"></div>
				<div class="col-md-6 bottom-menu"></div>
				<div class="col-md-2 bottom-menu">
					<span>已选商品 <span id="selectGoodsCount">0</span> 件
					</span>
				</div>
				<div class="col-md-1 bottom-menu">
					<span>合计：<span id="selectGoodsMoney">0.00</span></span>
				</div>
				<div class="col-md-1 bottom-menu submitData submitDis" onclick="submit()">
					结算
				</div>
			</div>
		</div>
		<div class="modal fade" tabindex="-1" role="dialog" id="deleteItemTip"
			aria-labelledby="gridSystemModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
					</div>
					<div class="modal-body">确认删除此商品？</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary deleteSure">确定</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" tabindex="-1" role="dialog" id="selectItemTip"
			aria-labelledby="gridSystemModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
					</div>
					<div class="modal-body">请选择要删除的商品！</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" tabindex="-1" role="dialog"
			id="deleteMultyTip" aria-labelledby="gridSystemModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
					</div>
					<div class="modal-body">确认删除选择的商品！</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary deleteMultySure">确定</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="<%=basePath%>js/jquery.min.js"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script type="text/javascript">
		var deleteGoods = null
		function ShoppingCarObserver(elInput, isAdd) {
			this.elInput = elInput
			this.parents = this.elInput.parents('.goods-item')
			this.count = parseInt(this.elInput.val())
			this.isAdd = isAdd
			this.singlePrice = parseFloat(this.parents.find('.single-price').text())
			this.computeGoodsMoney = function() {
				var moneyCount = this.count * this.singlePrice
				var singleTotalEl = this.parents.find('.single-total')
				console.log(moneyCount)
				singleTotalEl.empty().append(moneyCount)
			}
			this.showCount = function() {
				var isChecked = this.parents.find('.goods-list-item')[0].checked
				var GoodsTotalMoney = parseFloat($('#selectGoodsMoney').text())
				var goodsTotalCount = parseInt($('#selectGoodsCount').text())
				if(this.elInput) {
					if(this.isAdd) {
						++this.count
						if(isChecked) {
							$('#selectGoodsMoney').empty().append(GoodsTotalMoney + this.singlePrice)
							$('#selectGoodsCount').empty().append(goodsTotalCount + 1)
						}
					} else {
						if(parseInt(this.count) <= 1) {
							return
						} else {
							--this.count
							if(isChecked) {
								$('#selectGoodsMoney').empty().append(GoodsTotalMoney - this.singlePrice)
								$('#selectGoodsCount').empty().append(goodsTotalCount - 1)
							}
						}
					}
					this.elInput.val(this.count)
				}
			}
			this.checkIsAll = function() {
				var checkLen = $('.goods-list-item:checked').length
				if (checkLen > 0) {
					$('.submitData').removeClass('submitDis')
				} else {
					$('.submitData').addClass('submitDis')
				}
				if($('.goods-item').length === checkLen) {
					$('#checked-all-bottom, #check-goods-all').prop('checked', true)
				} else {
					$('#checked-all-bottom, #check-goods-all').prop('checked', false)
				}
			}
			this.checkedChange = function(isChecked) {
				if(isChecked === undefined) {
					var isChecked = this.parents.find('.goods-list-item')[0].checked
				}
				var itemTotalMoney = parseFloat(this.parents.find('.single-total').text())
				var GoodsTotalMoney = parseFloat($('#selectGoodsMoney').text())
				var itemCount = parseInt(this.parents.find('.goods-count').val())
				var goodsTotalCount = parseInt($('#selectGoodsCount').text())
				if(isChecked) {
					$('#selectGoodsMoney').empty().append(itemTotalMoney + GoodsTotalMoney)
					$('#selectGoodsCount').empty().append(itemCount + goodsTotalCount)
				} else {
					if (GoodsTotalMoney - itemTotalMoney === 0) {
						$('#selectGoodsMoney').empty().append('0.00')
						if (!$('.submitData').hasClass('submitDis')) {
							$('.submitData').addClass('submitDis')
						}
					} else {
						$('#selectGoodsMoney').empty().append(GoodsTotalMoney - itemTotalMoney)
					}
					$('#selectGoodsCount').empty().append(goodsTotalCount - itemCount)
				}
			}
			this.deleteGoods = function() {
				var isChecked = this.parents.find('.goods-list-item')[0].checked
				if(isChecked) {
					this.checkedChange(false)
				}
				this.parents.remove()
				this.checkOptions()
			}
			this.checkOptions = function() {
				if ($('#check-goods-all')[0].checked) {
					if ($('.goods-list-item').length <= 0) {
						$('#checked-all-bottom, #check-goods-all').prop('checked', false)
					}
				}
			}
		}
		function putcart1(id,gnum) {	
			if(gnum>1){	
				window.location.href = "/ch21/cart/putCart?id=" + id + "&&shoppingnum=-1" ;
				return true;
			}			
			alert("购买商品数量最少为1件");
			return false;
		}
		function putcart2(id,gnum,gstore) {
			if(gnum-gstore<0){	
				window.location.href = "/ch21/cart/putCart?id=" + id + "&&shoppingnum=1" ;
				return true;
			}
		
			alert("刚商品库存不足，请选择其他商品");
			return false;
			
		}
		function deleteAgoods(gno){
			if(window.confirm("真的删除该商品吗？")){
				window.location.href="/ch21/cart/deleteAgoods?id=" + gno;
				return true;
			}
			return false;
		}
		function submit(){
			window.location.href="/ch21/cart/orderConfirm";
		}
		function checkboxOnclickAll(checkbox){

			if ( checkbox.checked == true){
				
				window.location.href="/ch21/cart/updateAll1";
				return true;

			}else{

				window.location.href="/ch21/cart/updateAll2";
				return true;
			}

			}
		
		function checkboxOnclick(id,checkbox){

			if ( checkbox.checked == true){
				window.location.href="/ch21/cart/update1?id=" + id;
				return true;

			}else{
				window.location.href="/ch21/cart/update2?id=" + id;
				return true;

			}

			}
		
		function checkedAll(_this) {
			if ($('.goods-item').length <= 0) {
				$('.submitData').addClass('submitDis')
			} else {
				$('.submitData').removeClass('submitDis')
			}
			for(var i = 0; i < $('.goods-item').length; i++) {
				var elInput = $('.goods-item').eq(i).find('.goods-list-item')
				var isChecked = $('.goods-item').eq(i).find('.goods-list-item')[0].checked
				var checkAllEvent = new ShoppingCarObserver(elInput, null)
				if(_this.checked) {
					if(!isChecked) {
						elInput.prop('checked', true)
						checkAllEvent.checkedChange(true)
					}
				} else {
					if (!$('.submitData').hasClass('submitDis')){
						$('.submitData').addClass('submitDis')
					}
					if(isChecked) {
						elInput.prop('checked', false)
						checkAllEvent.checkedChange(false)
					}
				}
			}
		}
		$('#check-goods-all').on('change', function() {
			if(this.checked) {
				$('#checked-all-bottom').prop('checked', true)
			} else {
				$('#checked-all-bottom').prop('checked', false)
			}
			checkedAll(this)
		})
		$('#checked-all-bottom').on('change', function() {
			if(this.checked) {
				$('#check-goods-all').prop('checked', true)
			} else {
				$('#check-goods-all').prop('checked', false)
			}
			checkedAll(this)
		})
		$('.goods-list-item').on('change', function() {
			var tmpCheckEl = $(this)
			var checkEvent = new ShoppingCarObserver(tmpCheckEl, null)
			checkEvent.checkedChange()
			checkEvent.checkIsAll()
		})
		$('.goods-content').on('click', '.car-decrease', function() {
			var goodsInput = $(this).parents('.input-group').find('.goods-count')
			var decreaseCount = new ShoppingCarObserver(goodsInput, false)
			decreaseCount.showCount()
			decreaseCount.computeGoodsMoney()
		})
		$('.goods-content').on('click', '.car-add1', function() {
			var goodsInput = $(this).parents('.input-group').find('.goods-count')
			var addCount = new ShoppingCarObserver(goodsInput, true)
			addCount.showCount()
			addCount.computeGoodsMoney()
		})
		$('.goods-content').on('click', '.item-delete1', function() {
			var goodsInput = $(this).parents('.goods-item').find('.goods-list-item')
			deleteGoods = new ShoppingCarObserver(goodsInput, null)
			$('#deleteItemTip').modal('show')
		})
		$('.deleteSure').on('click', function() {
			if(deleteGoods !== null) {
				deleteGoods.deleteGoods()
			}
			$('#deleteItemTip').modal('hide')
		})
		$('#deleteMulty').on('click', function() {
			if($('.goods-list-item:checked').length <= 0) {
				$('#selectItemTip').modal('show')
			} else {
				$('#deleteMultyTip').modal('show')
			}
		})
		$('.deleteMultySure').on('click', function() {
			for (var i = 0; i < $('.goods-list-item:checked').length; i++) {
				var multyDelete = new ShoppingCarObserver($('.goods-list-item:checked').eq(i), null)
				multyDelete.deleteGoods()
				i--
			}
			multyDelete.checkOptions()
			$('#deleteMultyTip').modal('hide')
		})
		$('#submitGoodsMoney').on('click', function() {
			window.location.href="/ch21/cart/orderConfirm";
		})
	</script>
</html>